<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="设备编号">
          <el-input v-model="innerCode" type="text" clearable />
        </el-form-item>
        <el-form-item>
          <el-button class="demo" icon="el-icon-search" @click="searchEqu(innerCode)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="result">
      <!-- 表格组件 -->
      <div class="el-table">
        <el-table :data="vmList">
          <el-table-column type="index" label="序号" width="100" />
          <el-table-column width="200" label="设备编号" prop="innerCode" />
          <el-table-column width="200" label="设备型号" prop="type.name" />
          <el-table-column width="200" label="详细地址" prop="node.name" />
          <el-table-column width="200" label="运营状态" prop="vmStatus">
            <template v-slot="{row}">
              <span v-if="row.vmStatus===0">未投放</span>
              <span v-else-if="row.vmStatus===1">运营</span>
              <span v-else>撤机</span>
            </template>
          </el-table-column>
          <el-table-column label="设备状态" width="280px">
            <el-row type="flex" justify="start" align="middle">
              <el-button type="warning" round size="mini">离线</el-button>
              <el-button type="success" round size="mini">货道</el-button>
              <el-button type="success" round size="mini">传动轴</el-button>
            </el-row>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <!-- <el-button type="text" @click="editEqup(row.innerCode,row.vmType,row.nodeId,row.createUserId)">{{ row.innerCode }} 查看详情 </el-button> -->
              <el-button type="text" @click="editEqup(row.innerCode,row.vmType,row.nodeId)">查看详情 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页器 -->
      <div class="pagination-container">
        <span class="pageText">共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ totalPage }}页</span>
        <el-pagination
          background:true
          layout="prev, pager, next,slot"
          :total="totalCount"
          prev-text="上一页"
          next-text="下一页"
          @prev-click="prevPage"
          @next-click="nextPage"
          @current-change="change"
        />
      </div>
    </div>

    <!-- 查看详情弹层 -->
    <el-dialog :visible.sync="detailDialog" title="设备详情" width="730px">
      <el-row style="background:rgb(244,246,251);height:54px;line-height:54px;text-align:center">
        <el-col :span="6">销售量：{{ orderCount }}个</el-col>
        <el-col :span="6">销售额：{{ (orderAccount / 100).toFixed(2) }}元</el-col>
        <el-col :span="6">补货次数：{{ supplyCount }}次</el-col>
        <el-col :span="6">维修次数：{{ repairCount }}次</el-col>
      </el-row>
      <el-row style="margin:15px 0px">商品销量(月)</el-row>
      <el-row>
        <el-col v-for="item in skuCollect" :key="item.skuId" class="skuBox" :span="6">
          <span>{{ item.skuName }}:{{ item.count }}</span>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { getVmList, getsupplyCount, getReqiureCount, getOrderCount, getAccount, getskuCollect } from '@/api/vm'
export default {
  name: 'Status',
  data() {
    return {
      detailDialog: false, // 设备详情弹层
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页多少条数据
      innerCode: null, // 设备编号
      totalCount: 0, // 总条数
      totalPage: null, // 总页数
      vmList: [], // 接收后台返回的所有数据列表
      orderAccount: 0, // 一定时间内的收入
      orderCount: 0, // 一定时间内的总订单数
      supplyCount: 0, // 售货机补货次数
      repairCount: 0, // 售货机维修次数
      vmType: 0, // 售货机类型id
      nodeId: '', // 所属点位id
      createUserId: 1, // 创建人id
      skuCollect: [], // 商品销量
      start: dayjs().format('2023-05-01+00:00:00'),
      end: dayjs().format('2023-05-29+00:00:00')

    }
  },
  created() {
    this.getEquipmentList() // 获取所有设备信息
    // this.editEqup()
  },
  methods: {
    async editEqup(innerCode, vmType, nodeId) {
      const start = dayjs('2023-05-01 00:00:00').format('YYYY-MM-DD')
      const end = dayjs('2023-05-29 00:00:00').format('YYYY-MM-DD')
      console.log(innerCode)
      console.log(start, end)
      // 获取商品销量
      this.skuCollect = await getskuCollect(
        innerCode,
        start,
        end,
        {
          vmType,
          nodeId,
          createUserId: 1
        }
      )
      console.log(this.skuCollect)
      // // 获取售货机维修次数
      this.repairCount = await getReqiureCount(
        innerCode,
        start,
        end
      )
      console.log(this.repairCount)

      // // 获取售货机补货次数
      this.supplyCount = await getsupplyCount(
        innerCode,
        start,
        end
      )
      console.log(this.supplyCount)

      // // 获取一定时间内的订单总数
      this.orderCount = await getOrderCount(
        this.start,
        this.end,
        innerCode
      )
      console.log(this.orderCount)

      // 获取一定时间范围内的收入  △
      this.orderAccount = await getAccount(
        this.start,
        this.end,
        innerCode
      )
      console.log(this.orderAccount)
      this.detailDialog = true
    },

    // 查询设备
    async searchEqu(innerCode) {
      await this.getEquipmentList(innerCode)
    },
    // 获取所有设备信息列表
    async getEquipmentList() {
      const res = await getVmList({
        pageIndex: this.pageIndex,
        pageSize: 10,
        innerCode: this.innerCode
      })
      console.log(res)
      this.vmList = res.currentPageRecords
      this.totalCount = parseInt(res.totalCount)
      this.totalPage = parseInt(res.totalPage)
    },
    // 切换上分页
    prevPage() {
      if (this.pageIndex !== 1) {
        this.pageIndex--
        this.getEquipmentList() // 重新渲染数据
      }
    },
    // 下一页
    nextPage() {
      this.pageIndex++
      this.getEquipmentList() // 重新渲染
    },
    // 切换页码时，数据更新
    change(newPageIndex) {
      this.pageIndex = newPageIndex // 赋值当前页码
      this.getEquipmentList()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-button{
  border:0
}
.demo{
  background-color: #5f84ff !important;
  color: #fff;
  }
.app-container {
  padding:0;
  .search{
  display: flex;
  height:64px;
  -webkit-box-align: center;
  background-color: #fff;
  align-items: center;
  margin-bottom:20px;
  padding-left:17px;
  padding-top:20px;
  }
   .result {
   padding:20px 15px 19px 17px;
   background-color: #fff;
  .el-button--primary {
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg,#ff9743,#ff5e20) !important;
  }
  .el-table {
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    background-color: #fff;
    font-size: 14px;
    color:#606266;
  }
  }
  .pagination-container{
  height: 100px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 100px;
  padding:32px 16px;
}
::v-deep .pageText{
  font-size: 18px;
  color: #dbdfe5;
  margin-left: 15px;
}
.el-dialog .el-dialog__footer {
  padding-top:0;
  padding-bottom:40px;
}
.el-button--primary{
  background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
}
::v-deep .skuBox{
  border:1px solid #ccc;
  margin-left:-1px;
  margin-top:-1px;
  line-height: 40px;
  height: 40px;
  span{
    width: 120px;
    display: inline-block;
    vertical-align: middle;
    padding-left: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
}
</style>
